//baseURL
axios.defaults.baseURL='http://pcapi-xiaotuxian-front-devtest.itheima.net'



function nav_axios(){
    var config = {
        method: 'get',
        url: '/category/top',
        headers: { 
           'User-Agent': 'Apifox/1.0.0 (https://apifox.com)'
        }
     };
    axios(config)
.then(res=> {
   var data=res.data.result
   // console.log(data)


   //nav
    class CreateNav{
      //构造器函数(属性挂载)
      constructor(select,data){
         this.elem=document.querySelector(select);
         this.data=data
      }
      
      //方法
      render(){
         this.data.forEach(elem=>{
            this.elem.innerHTML = this.data.map(item => ` <li id=${item.id}><a href="#">${item.name}</a></li>`).join('');
         })
      }
   }
    
    
                 var obj=new CreateNav('nav>ul',data);
                 obj.render();




           
                 var default_children=data[0].children
               //aside默认
             
              class CreateAside{
               //构造器函数(属性挂载)
               constructor(select,data){
                  this.elem=document.querySelector(select);
                  this.data=data
               }
               
               //方法
               render(){
                  this.data.forEach(elem=>{
                     this.elem.innerHTML = this.data.map(item => ` <div>
                     <div class="iot_good_title"><p>${item.name}</p><span>全部 ></span></div>
                     <div class="iot_good_box">
                         <div  class="iot_good">
                             <a href=""><img src=${item.goods[0].picture} alt=""> <p>${item.goods[0].desc}</p>
                                 <span>￥${item.goods[0].price}</span></a>
                             <a href=""><img src=${item.goods[1].picture} alt=""> <p>${item.goods[1].desc}</p>
                                 <span>￥${item.goods[1].price}</span></a>
                             <a href=""><img src=${item.goods[2].picture} alt=""> <p>${item.goods[2].desc}</p>
                                 <span>￥${item.goods[2].price}</span></a>
                         </div>
                     </div>
                    </div>`).join('');
                  })
               }
            }
            
              
                           var obj1=new CreateAside('.iot_goods',default_children);
                           obj1.render();
            
             //点击改变nav
               var lis=document.querySelectorAll('nav>ul>li')
               var ids=[]
               lis.forEach(function(li){
                  ids.push(li.id)
               })
              
               lis[0].className='active'
               lis.forEach(function(li){
                   li.addEventListener('click',function(){
                        
                        lis.forEach(li=>{
                           li.className=''
                        })
                        this.className='active'             

                        var select_id=li.id
                        var index=ids.indexOf(select_id)
                        
                        var change_child=data[index].children
                        var obj_chang=new CreateAside('.iot_goods',change_child);
                        obj_chang.render();

                             })
                        })
                            
                             
            })
.catch(function (error) {
   console.log(error);
});
}
nav_axios()

//banner部分
function banner_axios(){
    var config = {
       method: 'get',
       url: '/home/banner?distributionSite=1',
       headers: { 
          'User-Agent': 'Apifox/1.0.0 (https://apifox.com)'
       }
    };
   var img_arr=[]
   axios(config)
   .then(function (response) {
      
       var i=0
       var imgs=[]
      //图片链接
      for(i=0;i<=4;i++){
       var img= JSON.stringify(response.data.result[i].imgUrl)
          imgs.push(img)
      }
      img_arr=imgs
 
      //Banner
   class CreateBanner{
      //构造器函数(属性挂载)
      constructor(select,data){
         this.elem=document.querySelector(select);
         this.imgs=data
      }
      
      //方法
      render(){
         this.elem.innerHTML = this.imgs.map(item => `<li class='active'> <img src=${item} alt=""></li>`).join('');
      }
   }
   
                var obj=new CreateBanner('.iot_img>ul',img_arr);
                obj.render();
                
         
   
   })
   .catch(function (error) {
      console.log(error);
   });
 }
 banner_axios()

//轮播图
setTimeout(() => {
   window.lis=document.querySelectorAll('.iot_img>ul>li')
    
 }, 3000);
 var index=0
setInterval(() => {
  var lis=window.lis
  lis.forEach(l=>{
     l.className=''
  })
  lis[index].className='active'

  index+=1
  if(index>4){
     index=0
  }
}, 3000);